<template>
    <u-popup :show="show" mode="bottom" @close="handleClose">
        <view class="coupon">
            <view class="header">
                优惠券
                <view class="close" @click="handleClose">
                    <u-icon size="32rpx" name="close"></u-icon>
                </view>
            </view>
            <view v-for="item in unusedCoupons" :key="item.id" class="item" :class="{disabled: isDisable(item)}"
                @click="handleCheck(item)">
                <view class="deduction">
                    <view class="amount"><text class="unit">￥</text>{{item.deductionAmount}}</view>
                </view>
                <view class="info">
                    <view class="title">{{item.title}}</view>
                    <view class="end-time" v-if="item.endTime">{{item.endTime}}前有效</view>
                    <view class="end-time" v-else>无时间限制</view>
                </view>
                <view class="check">
                    <u-icon v-if="item.checked" :color="color['primary-color']" size="32rpx"
                        name="checkmark-circle-fill"></u-icon>
                    <view v-else class="empty"></view>
                </view>
            </view>
            <view v-if="!unusedCoupons.length" class="item" style="justify-content: center;">
                <u-empty mode="coupon" text-size="32rpx" icon-size="200rpx"></u-empty>
            </view>
            <view class="footer">
                <view class="deduction">
                    共优惠
                    <view class="amount"><text class="unit">￥</text>{{couponAmount}}</view>
                </view>
                <view v-if="!orderId" class="save" @click="handleConfirm">确定</view>
            </view>
        </view>
    </u-popup>
</template>

<script>
    export default {
        props: {
            def: {
                type: Array,
                default: []
            },
            show: {
                type: Boolean,
                default: true
            },
            max: {
                type: Number,
                default: 0
            },
            orderId: {
                type: String,
                default: ''
            },
            targetType: {
                type: String,
                default: 'XYPS'
            },
        },
        data() {
            return {
                unusedCoupons: [],
            }
        },
        watch: {
            show(show) {
                if (!show) return;
                this.$api.coupon.moduleUnused({
                    targetType: this.targetType,
                    orderId: this.orderId,
                }).then(res => {
                    res.list.forEach(c => c.checked = this.def.indexOf(c.id) > -1)
                    this.unusedCoupons = res.list;
                })
            }
        },
        computed: {
            couponAmount() {
                let amount = 0;
                this.unusedCoupons.filter(c => c.checked).forEach(c => {
                    amount += Number(c.deductionAmount);
                })
                return amount;
            }
        },
        methods: {
            handleClose(e) {
                console.log('handleClose', arguments)
                this.$emit('close')
            },
            handleConfirm() {
                let ids = this.unusedCoupons.filter(c => c.checked).map(c => c.id);
                this.$emit('confirm', ids, this.couponAmount)
            },
            handleCheck(coupon) {
                if (this.orderId || this.isDisable(coupon)) {
                    return;
                }
                coupon.checked = !coupon.checked;
            },
            isDisable(item) {
                return !item.checked && this.couponAmount + Number(item.deductionAmount) > this.max;
            }
        }
    }
</script>

<style scoped lang="scss">
    .coupon {
        width: 100%;

        .header {
            border-bottom: 1rpx solid #cdcdcd;
            padding: 32rpx 0 28rpx 32rpx;
            font-size: 32rpx;

            .close {
                float: right;
                padding-right: 32rpx;
            }
        }

        .item {
            display: flex;
            align-items: center;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #cdcdcd;

            .deduction {
                width: 180rpx;
                color: #f44336;
                text-align: center;
                font-size: 44rpx;

                .unit {
                    font-size: 0.7em;
                }
            }

            .info {
                flex-grow: 1;
                font-size: 32rpx;

                .end-time {
                    color: #ccc;
                    font-size: 0.8em;
                }
            }

            .check {
                padding: 0 32rpx;
                color: $primary-color;

                .empty {
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    border: 1rpx solid #cdcdcd;
                }
            }
        }

        .disabled {

            .deduction,
            .title {
                color: #cdcdcd;
            }

            .empty {
                border-color: #ccc;
                background: #cdcdcd;
            }
        }

        .footer {
            padding: 64rpx 32rpx 32rpx 32rpx;
            display: flex;
            font-size: 32rpx;

            .deduction {
                flex-grow: 1;

                .amount {
                    font-size: 1.5em;
                    color: #F44336;
                    text-align: left;
                }
            }

            .save {
                background: $primary-color;
                color: #fff;
                text-align: center;
                padding: 32rpx;
                border-radius: 16rpx;
                width: 200rpx;
            }
        }
    }
</style>